@mdzip/editor 1.3.11 → 1.3.12

package/README.md

@@ -5,6 +5,9 @@
 
 # @mdzip/editor
 
+[![npm](https://img.shields.io/npm/v/@mdzip/editor?logo=npm)](https://www.npmjs.com/package/@mdzip/editor)
+[![license](https://img.shields.io/npm/l/@mdzip/editor)](https://github.com/mdzip-project/mdzip-editor/blob/main/LICENSE)
+
 Framework-independent MDZip workspace engine and browser view.
 
 `@mdzip/editor` provides reusable helpers for opening `.mdz` archives, rendering Markdown previews, editing archive contents, comparing archive inventories, and embedding a configurable MDZip workspace UI.
@@ -107,6 +110,44 @@ workspace dirty.
 - `standalone-editor`: full editor controls, including save.
 - `hosted-editor`: editor controls without an embedded save button, for hosts such as VS Code that own persistence.
 
+Call `setControls(nextControls)` to update the policy after construction
+without rebuilding the workspace view. `lineNumbers` changes are applied to the
+existing CodeMirror editor, preserving the current document and selection.
+
+## Density and Spacing
+
+Hosts can opt into smaller built-in UI without targeting private classes:
+
+```ts
+const view = new MdzipWorkspaceView(container, {
+  controls: 'hosted-editor',
+  toolbarDensity: 'compact', // 'comfortable' | 'compact' | 'dense'
+  contentDensity: 'compact'  // 'comfortable' | 'compact'
+});
+
+view.setDensityOptions({
+  toolbarDensity: 'dense',
+  contentDensity: 'compact'
+});
+```
+
+For exact sizing, set stable CSS custom properties on an ancestor of the
+workspace:
+
+```css
+.studio-editor {
+  --mdzip-toolbar-button-size: 28px;
+  --mdzip-toolbar-compact-button-size: 26px;
+  --mdzip-toolbar-icon-size: 14px;
+  --mdzip-format-button-size: 26px;
+  --mdzip-format-icon-size: 14px;
+  --mdzip-toolbar-padding: 2px 8px;
+  --mdzip-toolbar-gap: 4px;
+  --mdzip-editor-content-padding: 16px 20px;
+  --mdzip-preview-content-padding: 16px 20px 24px;
+}
+```
+
 ## Host Persistence
 
 Desktop hosts can flush pending editor content, persist the returned bytes, and
@@ -171,6 +212,23 @@ selection while a host dialog is open; it returns `false` if that document has
 changed. `context.convertToMdz()` runs the built-in conversion and image action
 against the same captured selection.
 
+## Image Insert Hook
+
+Set `imageInsertMode` to choose the built-in image markup flow:
+`'markdown'` keeps the default `![alt](path)` insertion, `'html'` inserts a
+default `<img>` element, and `'ask'` opens a small dialog for Markdown vs HTML,
+alt text, proportional size, and alignment.
+
+For host-owned UI, provide `imageInsertHandler`. It receives file metadata,
+intrinsic image size when detected, and the source (`'paste'`, `'drop'`, or
+`'picker'`). Return `{ mode: 'markdown', altText }` or
+`{ mode: 'html', altText, width, height, position }`; return `null` to cancel.
+The built-in dialog asks for width, height, or percent scaling and preserves
+aspect ratio by emitting one dimension, or proportional dimensions for percent
+scaling. Returning `undefined` falls back to `imageInsertMode`.
+The built-in HTML path uses portable `align` attributes for positioning because
+the default preview sanitizer strips inline `style` attributes.
+
 `MdzipRenderingService` uses `defaultSafeMarkdownRenderer` when no renderer is
 injected. The default renderer sanitizes generated HTML and unsafe URL schemes.
 
@@ -332,6 +390,11 @@ under `prefers-reduced-motion`). `onPreviewRendered` fires when the text is
 mounted; `onAssetsHydrated` fires once every referenced image has resolved and
 its final `src` is assigned.
 
+In live-editing hosts where the preview re-renders frequently, pass
+`imageHydrationAnimation: 'initial'` to keep the first-load reveal but snap
+images open on same-document edits. Use `'off'` to disable the loading pulse
+and slide-open animation entirely.
+
 ## Content Security Policy (restricted hosts)
 
 Archive images resolve to `URL.createObjectURL()` **`blob:` object URLs** (the

package/dist/library-info.d.ts

@@ -1,11 +1,11 @@
 export declare const MDZIP_RUNTIME_LIBRARIES: readonly [{
     readonly name: "@mdzip/editor";
-    readonly version: "1.3.11";
+    readonly version: "1.3.12";
     readonly repositoryUrl: "https://github.com/mdzip-project/mdzip-editor";
     readonly description: "MDZip workspace engine and browser UI.";
 }, {
     readonly name: "@mdzip/core-js";
-    readonly version: "1.3.1";
+    readonly version: "1.3.2";
     readonly repositoryUrl: "https://github.com/mdzip-project/mdzip-core-js";
     readonly description: "MDZip archive reading, writing, and validation.";
 }, {

package/dist/library-info.js

@@ -2,13 +2,13 @@
 export const MDZIP_RUNTIME_LIBRARIES = [
     {
         "name": "@mdzip/editor",
-        "version": "1.3.11",
+        "version": "1.3.12",
         "repositoryUrl": "https://github.com/mdzip-project/mdzip-editor",
         "description": "MDZip workspace engine and browser UI."
     },
     {
         "name": "@mdzip/core-js",
-        "version": "1.3.1",
+        "version": "1.3.2",
         "repositoryUrl": "https://github.com/mdzip-project/mdzip-core-js",
         "description": "MDZip archive reading, writing, and validation."
     },

package/dist/view-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-css.d.ts","sourceRoot":"","sources":["../src/view-css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa,QAshDzB,CAAC"}
+{"version":3,"file":"view-css.d.ts","sourceRoot":"","sources":["../src/view-css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa,QAkuDzB,CAAC"}

package/dist/view-css.js

@@ -26,6 +26,49 @@ export const WORKSPACE_CSS = `
   box-sizing: border-box;
 }
 
+.mdzip-root.toolbar-density-compact {
+  --mdzip-density-toolbar-padding: 3px 10px;
+  --mdzip-density-toolbar-gap: 6px;
+  --mdzip-density-toolbar-start-gap: 8px;
+  --mdzip-density-toolbar-group-padding: 2px;
+  --mdzip-density-toolbar-button-width: 34px;
+  --mdzip-density-toolbar-button-height: 30px;
+  --mdzip-density-toolbar-compact-button-size: 28px;
+  --mdzip-density-toolbar-icon-size: 15px;
+  --mdzip-density-toolbar-icon-large-size: 19px;
+  --mdzip-density-toolbar-icon-extra-large-size: 22px;
+  --mdzip-density-theme-icon-size: 16px;
+  --mdzip-density-format-toolbar-gap: 4px;
+  --mdzip-density-format-toolbar-group-gap: 1px;
+  --mdzip-density-format-button-size: 28px;
+  --mdzip-density-format-menu-button-width: 36px;
+  --mdzip-density-format-icon-size: 15px;
+}
+
+.mdzip-root.toolbar-density-dense {
+  --mdzip-density-toolbar-padding: 2px 8px;
+  --mdzip-density-toolbar-gap: 4px;
+  --mdzip-density-toolbar-start-gap: 6px;
+  --mdzip-density-toolbar-group-padding: 1px;
+  --mdzip-density-toolbar-button-width: 30px;
+  --mdzip-density-toolbar-button-height: 28px;
+  --mdzip-density-toolbar-compact-button-size: 26px;
+  --mdzip-density-toolbar-icon-size: 14px;
+  --mdzip-density-toolbar-icon-large-size: 18px;
+  --mdzip-density-toolbar-icon-extra-large-size: 20px;
+  --mdzip-density-theme-icon-size: 15px;
+  --mdzip-density-format-toolbar-gap: 3px;
+  --mdzip-density-format-toolbar-group-gap: 1px;
+  --mdzip-density-format-button-size: 26px;
+  --mdzip-density-format-menu-button-width: 34px;
+  --mdzip-density-format-icon-size: 14px;
+}
+
+.mdzip-root.content-density-compact {
+  --mdzip-density-editor-content-padding: 20px 28px;
+  --mdzip-density-preview-content-padding: 20px 24px 32px;
+}
+
 .mdzip-root.mdzip-theme-light {
   color-scheme: light;
   ${MDZIP_LIGHT_DEFAULTS_CSS}
@@ -63,11 +106,14 @@ export const WORKSPACE_CSS = `
 }
 
 .mdzip-root .toolbar {
+  --view-mode-min-left: calc(var(--editor-pane-offset) + 520px);
+  --view-mode-max-left: calc(100% - 170px);
+
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
   column-gap: 12px;
-  padding: 4px 12px;
+  padding: var(--mdzip-toolbar-padding, var(--mdzip-density-toolbar-padding, 4px 12px));
   background: var(--mdzip-toolbar-background-color);
   border-bottom: 1px solid var(--mdzip-border-color);
   min-height: 48px;
@@ -81,7 +127,7 @@ export const WORKSPACE_CSS = `
   display: flex;
   align-items: center;
   min-width: 0;
-  gap: 10px;
+  gap: var(--mdzip-toolbar-gap, var(--mdzip-density-toolbar-gap, 10px));
 }
 
 .mdzip-root .toolbar-start {
@@ -89,7 +135,7 @@ export const WORKSPACE_CSS = `
   align-items: center;
   justify-self: start;
   min-width: 0;
-  gap: 12px;
+  gap: var(--mdzip-toolbar-start-gap, var(--mdzip-density-toolbar-start-gap, 12px));
 }
 
 .mdzip-root.navigation-pane-visible {
@@ -174,7 +220,7 @@ export const WORKSPACE_CSS = `
   align-items: center;
   gap: 4px;
   justify-self: center;
-  padding: 3px;
+  padding: var(--mdzip-toolbar-group-padding, var(--mdzip-density-toolbar-group-padding, 3px));
   border: 1px solid var(--mdzip-widget-border-color);
   border-radius: 8px;
   background: var(--mdzip-widget-background-color);
@@ -182,7 +228,11 @@ export const WORKSPACE_CSS = `
 
 .mdzip-root .view-mode-toggle-group {
   position: absolute;
-  left: calc((100% + var(--workspace-pane-offset)) / 2);
+  left: clamp(
+    var(--view-mode-min-left),
+    calc((100% + var(--workspace-pane-offset)) / 2),
+    var(--view-mode-max-left)
+  );
   top: 50%;
   transform: translate(-50%, -50%);
   gap: 2px;
@@ -193,8 +243,8 @@ export const WORKSPACE_CSS = `
 }
 
 .mdzip-root .icon-toggle {
-  width: 42px;
-  height: 36px;
+  width: var(--mdzip-toolbar-button-width, var(--mdzip-toolbar-button-size, var(--mdzip-density-toolbar-button-width, 42px)));
+  height: var(--mdzip-toolbar-button-height, var(--mdzip-toolbar-button-size, var(--mdzip-density-toolbar-button-height, 36px)));
   padding: 0;
   cursor: pointer;
   background: transparent;
@@ -221,16 +271,16 @@ export const WORKSPACE_CSS = `
 }
 
 .mdzip-root .toggle-icon {
-  width: 17px;
-  height: 17px;
+  width: var(--mdzip-toolbar-icon-size, var(--mdzip-density-toolbar-icon-size, 17px));
+  height: var(--mdzip-toolbar-icon-size, var(--mdzip-density-toolbar-icon-size, 17px));
   fill: none;
   stroke: currentColor;
 }
 
 .mdzip-root .view-mode-toggle {
   position: relative;
-  width: 32px;
-  height: 32px;
+  width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
+  height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
   border-radius: 6px;
   color: var(--mdzip-control-foreground-color);
 }
@@ -257,13 +307,13 @@ export const WORKSPACE_CSS = `
 }
 
 .mdzip-root .view-mode-toggle .toggle-icon {
-  width: 1.5em;
-  height: 1.5em;
+  width: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
+  height: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
 }
 
 .mdzip-root .nav-toggle {
-  width: 32px;
-  height: 32px;
+  width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
+  height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
   border-radius: 6px;
 }
 
@@ -272,14 +322,22 @@ export const WORKSPACE_CSS = `
   color: var(--mdzip-link-color);
 }
 
+.mdzip-root .nav-toggle.convert-mdz-toggle {
+  color: var(--mdzip-link-color);
+}
+
+.mdzip-root .nav-toggle.convert-mdz-toggle:hover:not(:disabled) {
+  background: var(--mdzip-control-hover-background-color);
+}
+
 .mdzip-root .nav-toggle .toggle-icon {
-  width: 1.9em;
-  height: 1.9em;
+  width: var(--mdzip-toolbar-icon-extra-large-size, var(--mdzip-density-toolbar-icon-extra-large-size, 1.9em));
+  height: var(--mdzip-toolbar-icon-extra-large-size, var(--mdzip-density-toolbar-icon-extra-large-size, 1.9em));
 }
 
 .mdzip-root .zoom-toggle .toggle-icon {
-  width: 1.5em;
-  height: 1.5em;
+  width: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
+  height: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
 }
 
 .mdzip-root .zoom-toggle.active {
@@ -291,15 +349,15 @@ export const WORKSPACE_CSS = `
   display: flex;
   align-items: center;
   gap: 2px;
-  padding: 3px;
+  padding: var(--mdzip-toolbar-group-padding, var(--mdzip-density-toolbar-group-padding, 3px));
   border: 1px solid var(--mdzip-widget-border-color);
   border-radius: 8px;
   background: var(--mdzip-widget-background-color);
 }
 
 .mdzip-root .theme-toggle {
-  width: 32px;
-  height: 32px;
+  width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
+  height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
   border-radius: 6px;
 }
 
@@ -309,8 +367,8 @@ export const WORKSPACE_CSS = `
 }
 
 .mdzip-root .theme-toggle .toggle-icon {
-  width: 18px;
-  height: 18px;
+  width: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
+  height: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
 }
 
 .mdzip-root .workspace-shell {
@@ -412,7 +470,10 @@ export const WORKSPACE_CSS = `
   gap: 9px;
   width: 100%;
   min-height: 34px;
-  padding: 5px 9px;
+  /* No vertical padding: row height comes from min-height, and zero top/bottom
+     padding lets the stretched .nav-indent guide cells fill the full row so the
+     per-row rails meet between siblings instead of leaving padding-sized gaps. */
+  padding: 0 9px;
   border: none;
   border-radius: 4px;
   background: transparent;
@@ -431,34 +492,73 @@ export const WORKSPACE_CSS = `
   background: var(--mdzip-hover-background-color);
 }
 
+/* Indentation comes from per-row guide cells (.nav-indent), not container
+   margins, so each row owns its guide lines. */
 .mdzip-root .nav-directory-children {
   position: relative;
-  margin-left: 19px;
-  padding-left: 14px;
 }
 
-.mdzip-root .nav-directory-children > .nav-file,
-.mdzip-root .nav-directory-children > .nav-directory > summary {
+/* One guide cell per ancestor depth, prepended to each nested row. Fixed width
+   gives the indentation; the rails/elbow are painted within the cell at the
+   row's own height, so they never overshoot an expanded last subfolder.
+
+   --nav-guide-x positions the rail so it drops straight from the parent
+   folder's icon: the icon sits 19px (caret 10px + the 9px row gap) right of its
+   disclosure column, and because the per-level step (cell 16px + 9px gap = 25)
+   equals the rail-to-icon distance, the same offset keeps every depth aligned. */
+.mdzip-root .nav-indent {
+  flex: 0 0 16px;
+  align-self: stretch;
   position: relative;
+  --nav-guide-x: 19px;
 }
 
-.mdzip-root .nav-directory-children > .nav-file::before,
-.mdzip-root .nav-directory-children > .nav-directory > summary::before {
+/* Ancestor column with more siblings below: continuous full-height rail. */
+.mdzip-root .nav-indent-rail::before {
   content: "";
   position: absolute;
-  left: 6px;
+  left: var(--nav-guide-x);
   top: 0;
   bottom: 0;
-  width: 22px;
+  width: 1px;
+  background: var(--mdzip-tree-guide-color);
+}
+
+/* Connector to this row: vertical down to the row center (elbow └), extended
+   full-height for a tee (├) when the row's folder has siblings below. */
+.mdzip-root .nav-indent-connector::before {
+  content: "";
+  position: absolute;
+  left: var(--nav-guide-x);
+  top: 0;
+  height: 50%;
+  width: 1px;
   background: var(--mdzip-tree-guide-color);
-  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0 V17.5 H22' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") left top / 22px 100% no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0 V17.5 H22' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") left top / 22px 100% no-repeat;
 }
 
-.mdzip-root .nav-directory-children > .nav-file:not(:last-child)::before,
-.mdzip-root .nav-directory-children > .nav-directory:not(:last-child) > summary::before {
-  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0 V34 M0.5 17.5 H22' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") left top / 22px 100% no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0 V34 M0.5 17.5 H22' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") left top / 22px 100% no-repeat;
+.mdzip-root .nav-indent-connector.nav-indent-continues::before {
+  height: 100%;
+}
+
+/* Horizontal arm from the connector rail to the row's caret/icon. Reaches the
+   disclosure triangle that sits one row-gap past the cell (folders). */
+.mdzip-root .nav-indent-connector::after {
+  content: "";
+  position: absolute;
+  left: var(--nav-guide-x);
+  right: -9px;
+  top: 50%;
+  height: 1px;
+  background: var(--mdzip-tree-guide-color);
+}
+
+/* Files have no disclosure triangle in the caret slot, so extend the arm across
+   it (the empty 10px caret plus the 9px row gaps on either side) to meet the
+   file icon; folders keep the short arm because their triangle already sits at
+   the cell edge. The right offset is measured from the cell edge, so this holds
+   regardless of where --nav-guide-x places the rail. */
+.mdzip-root .nav-file > .nav-indent-connector::after {
+  right: calc(-1 * (10px + 2 * 9px));
 }
 
 .mdzip-root .nav-caret {
@@ -746,7 +846,7 @@ export const WORKSPACE_CSS = `
 .mdzip-root .edit-toolbar {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: var(--mdzip-format-toolbar-gap, var(--mdzip-density-format-toolbar-gap, 7px));
   min-height: 32px;
   padding: 0;
   overflow: visible;
@@ -768,7 +868,7 @@ export const WORKSPACE_CSS = `
 .mdzip-root .edit-toolbar-group {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--mdzip-format-toolbar-group-gap, var(--mdzip-density-format-toolbar-group-gap, 2px));
   flex: 0 0 auto;
 }
 
@@ -777,8 +877,8 @@ export const WORKSPACE_CSS = `
   align-items: center;
   justify-content: center;
   gap: 2px;
-  width: 32px;
-  height: 32px;
+  width: var(--mdzip-format-button-size, var(--mdzip-density-format-button-size, 32px));
+  height: var(--mdzip-format-button-size, var(--mdzip-density-format-button-size, 32px));
   padding: 0;
   border: 0;
   border-radius: 5px;
@@ -803,7 +903,7 @@ export const WORKSPACE_CSS = `
 }
 
 .mdzip-root .edit-toolbar .format-menu-toggle {
-  width: 42px;
+  width: var(--mdzip-format-menu-button-width, var(--mdzip-density-format-menu-button-width, 42px));
   gap: 2px;
 }
 
@@ -854,8 +954,8 @@ export const WORKSPACE_CSS = `
 }
 
 .mdzip-root .format-icon {
-  width: 17px;
-  height: 17px;
+  width: var(--mdzip-format-icon-size, var(--mdzip-density-format-icon-size, 17px));
+  height: var(--mdzip-format-icon-size, var(--mdzip-density-format-icon-size, 17px));
   fill: none;
   stroke: currentColor;
 }
@@ -906,7 +1006,7 @@ export const WORKSPACE_CSS = `
 .mdzip-root .preview-content {
   max-width: 900px;
   margin: 0 auto;
-  padding: 36px 32px 48px;
+  padding: var(--mdzip-preview-content-padding, var(--mdzip-density-preview-content-padding, 36px 32px 48px));
   line-height: 1.55;
   font-size: calc(16px * var(--mdz-zoom));
 }
@@ -1027,6 +1127,24 @@ export const WORKSPACE_CSS = `
   border-radius: 4px;
 }
 
+.mdzip-root .preview-content img.mdzip-image-left,
+.mdzip-root .preview-content img.mdzip-image-wrap-left {
+  float: left;
+  margin: 0.25em 1em 0.75em 0;
+}
+
+.mdzip-root .preview-content img.mdzip-image-right,
+.mdzip-root .preview-content img.mdzip-image-wrap-right {
+  float: right;
+  margin: 0.25em 0 0.75em 1em;
+}
+
+.mdzip-root .preview-content img.mdzip-image-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 /* Progressive image hydration. Each archive image mounts inside a collapsed
    slot so the text stays compact and immediately readable; when the image
    resolves, the slot eases open (0fr -> 1fr) to the height reserved from its
@@ -1044,10 +1162,24 @@ export const WORKSPACE_CSS = `
   grid-template-rows: 1fr;
 }
 
+.mdzip-root .preview-content .mdzip-image-slot.mdzip-image-animation-off {
+  transition: none;
+}
+
 .mdzip-root .preview-content .mdzip-image-slot > img {
   min-height: 0;
 }
 
+.mdzip-root .preview-content .mdzip-image-slot.mdzip-image-align-left {
+  float: left;
+  margin: 0.25em 1em 0.75em 0;
+}
+
+.mdzip-root .preview-content .mdzip-image-slot.mdzip-image-align-right {
+  float: right;
+  margin: 0.25em 0 0.75em 1em;
+}
+
 .mdzip-root .preview-content img.mdzip-image-loading {
   background: var(--mdzip-control-background-color, rgba(127, 127, 127, 0.12));
   animation: mdzip-image-pulse 1.2s ease-in-out infinite;
@@ -1234,6 +1366,29 @@ export const WORKSPACE_CSS = `
   font-size: 13px;
 }
 
+.mdzip-root .title-dialog select {
+  width: 100%;
+  border: 1px solid var(--mdzip-widget-border-color);
+  background: var(--mdzip-editor-background-color);
+  color: var(--mdzip-editor-foreground-color);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 13px;
+}
+
+.mdzip-root .title-dialog input:disabled,
+.mdzip-root .title-dialog select:disabled {
+  border-color: var(--mdzip-border-color);
+  background: var(--mdzip-secondary-background-color);
+  color: var(--mdzip-muted-foreground-color);
+  opacity: 0.72;
+  cursor: not-allowed;
+}
+
+.mdzip-root .title-dialog input:disabled::placeholder {
+  color: var(--mdzip-muted-foreground-color);
+}
+
 .mdzip-root .title-dialog-validation {
   color: #cf222e !important;
 }
@@ -1265,6 +1420,57 @@ export const WORKSPACE_CSS = `
   color: var(--mdzip-accent-foreground-color);
 }
 
+.mdzip-root .image-insert-dialog {
+  width: min(460px, calc(100vw - 32px));
+}
+
+.mdzip-root .image-insert-options {
+  display: grid;
+  gap: 6px;
+  margin: 10px 0;
+  padding: 10px;
+  border: 1px solid var(--mdzip-widget-border-color);
+  border-radius: 4px;
+}
+
+.mdzip-root .image-insert-options legend {
+  padding: 0 4px;
+  color: var(--mdzip-muted-foreground-color);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.mdzip-root .image-insert-options label,
+.mdzip-root .image-insert-field {
+  display: grid;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.mdzip-root .image-insert-options label {
+  grid-template-columns: auto 1fr;
+  align-items: center;
+}
+
+.mdzip-root .image-insert-options input {
+  width: auto;
+}
+
+.mdzip-root .image-insert-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.mdzip-root .image-insert-field {
+  margin-top: 8px;
+}
+
+.mdzip-root .image-insert-field.field-disabled {
+  color: var(--mdzip-muted-foreground-color);
+}
+
 .mdzip-root .metadata-dialog dl {
   margin: 12px 0 0;
 }
@@ -1355,11 +1561,9 @@ export const WORKSPACE_CSS = `
   .mdzip-root { --nav-pane-width: 220px; }
 }
 
-/* Stack the formatting toolbar onto its own row before the absolutely
-   centered view-mode toggle can collide with it. Without the navigation pane
-   the collision band starts just under ~1000px; with the (resizable, default
-   280px) navigation pane open everything shifts right, so stack earlier. */
-@media (max-width: 1000px) {
+/* Stack the formatting toolbar only once the pushed-right view-mode toggle no
+   longer has enough room between the edit tools and the right-side controls. */
+@media (max-width: 760px) {
   .mdzip-root .toolbar {
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     row-gap: 4px;
@@ -1388,7 +1592,7 @@ export const WORKSPACE_CSS = `
   }
 }
 
-@media (max-width: 1280px) {
+@media (max-width: 1100px) {
   .mdzip-root.navigation-pane-visible .toolbar {
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     row-gap: 4px;

package/dist/view-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-css.js","sourceRoot":"","sources":["../src/view-css.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAEpB,MAAM,wBAAwB,GAAG,qBAAqB,CAAC,UAAU,CAC/D,UAAU,EACV,kBAAkB,CACnB,CAAC;AACF,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,UAAU,CAC7D,UAAU,EACV,kBAAkB,CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;IAUzB,mBAAmB;;;;;;;;;;;;;;;;;IAiBnB,wBAAwB;;;;;IAKxB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAs/C1B,CAAC"}
+{"version":3,"file":"view-css.js","sourceRoot":"","sources":["../src/view-css.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAEpB,MAAM,wBAAwB,GAAG,qBAAqB,CAAC,UAAU,CAC/D,UAAU,EACV,kBAAkB,CACnB,CAAC;AACF,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,UAAU,CAC7D,UAAU,EACV,kBAAkB,CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;IAUzB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4DnB,wBAAwB;;;;;IAKxB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAupD1B,CAAC"}